<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for = "(page,index) in pages" :key="index" >
        <div class="icon" v-for = "item in page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl" :alt="item.desc">
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data (){
    return {
      swiperOption:{
        autoplay:false,

      }
    }
  },
  props:{
    iconList:Array
  },
  computed:{
    // 把一个一维数组 8个一组的二维数组
    pages(){
      const pages = []
      this.iconList.forEach((item,index) => {
        const page = Math.floor(index/8)
        if(!pages[page]){
          pages[page] = []
        }
        pages[page].push(item)
      });
      return pages
    }
  }
}
</script>
<style lang="less" scoped>
@import '~styles/varibles.less';
@import '~styles/mixins.less';

  .icons{
    margin-top:.1rem;
    /*touch-action ：当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。 
    touch-action取值有一下两种 
    none：系统默认菜单被禁用 
    default：系统默认菜单不被禁用*/
    touch-action: none;
    /* overflow: hidden; swiper-container 中自带了 overflow:hidden*/
    & > .swiper-container{
      height: 0;
      width:100%;
      padding-bottom:50%;/* 参照自身宽度 */
    }
    .icon{
      height: 0;
      float: left;
      width: 25%;/*参照父级元素宽度*/
      padding-bottom: 25%;/*参照父级元素宽度*/
      overflow: hidden;
      position: relative;
      .icon-img{
        /* 这样定位会占满除底部.44rem之外的所有位置 */
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: .44rem;
        box-sizing: border-box;
        padding:.1rem;
        .icon-img-content{
          height: 100%;
          display: block;
          margin:0 auto;
        }
      }
      .icon-desc{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        height: .44rem;
        line-height: .44rem;
        color:@indexIconText;
        .ellipsis
      }
    }
  }
</style>